<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css?v=4.1.0" rel="stylesheet">

    <style>
        #alertmod_table_list_proxyQrCode {
            top: 900px !important;
        }
    </style>
</head>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-content">
	                    <div id="mysearch" class="form-inline">
	                    	<label>制作名称：</label><input class="form-control input-s" type = "text" id = "aName" name = "aName" value = "${aName }"
										 placeholder="输入作品名称，小于20位" maxlength="20" >
									<c:if test="${not empty proxyList}">  
										<label class="label-text">所属客户：</label>
											<select name = "proxy" id = "proxy"  onchange="get_select_proxy()">
									    		<option value="" >请选择</option>
												<c:forEach items="${proxyList }" var = "e">
													<option value = "${e.id }">${e.name }</option>
												</c:forEach>
											</select>
											<select name = "proxyId" id = "proxyId">
													<option value = "">请选择</option>
											</select>
								　　</c:if>
								　　<c:if test="${not empty proxyCompany}">
									<label class="label-text">所属客户：</label>
										<select name = "proxyId" id = "proxyId">
								    		<option value="" >请选择</option>
											<c:forEach items="${proxyCompany }" var = "e">
												<option value = "${e.id }">${e.name }</option>
											</c:forEach>
										</select>
									</c:if>
							<input type = "button" class="btn btn-primary"  value = "搜索" onclick = "searchAr();">
                    		<shiro:hasPermission name="proxyAr:add">
								<input type = "button" class="btn btn-primary"  value = "添加" onclick = "addAr();">
                    		</shiro:hasPermission >
                    		
	                    </div>
	                    <br />
                        <div class="jqGrid_wrapper">
                            <table id="table_list_proxyQrCode"></table>
                            <div id="pager_list_2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Peity -->
    <script src="${pageContext.request.contextPath }/js/plugins/peity/jquery.peity.min.js"></script>
    <!-- jqGrid -->
    <script src="${pageContext.request.contextPath }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath }/js/content.js?v=1.0.0"></script>
    <!-- layer -->
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
    <script>

		//获取代理
		function get_select_proxy(){
			var code = document.getElementById('proxy').value.replace(",","");
			var hangyeItem = $("#proxyId");
			hangyeItem.empty();
			$.get("/admin/proxyCompany/getProxyById/"+code, function(result){
				var option0 = $("<option>").text('选择分类').val('');
				hangyeItem.append(option0);
				for(var i=0;i<result.length;i++) {
					if(i == 0){
						var option = $("<option>").text(result[i].name).val(result[i].id).attr("selected","selected");
					}else{
						var option = $("<option>").text(result[i].name).val(result[i].id);
					}
					hangyeItem.append(option);
				}
			});
		}

		//logo
		function logoFormatter(cellvalue, options, rowdata) {
    		return ' <img src="' + rowdata.image_url + '"  style="width:50px;height:50px;" />';
		}

		//logo
		function qrCodeFormatter(cellvalue, options, rowdata) {
			var qrcode = rowdata.qr_code;
			if(!qrcode){
				return "暂无二维码";
			}else{
				return ' <img src="' + qrcode + '"  style="width:50px;height:50px;" />';	
			}
    		
		}
		
		function videoFormatter(cellvalue, options, rowdata) {
    		return ' <a href="' + rowdata.video_url + '" target="_blank">点击查看</a>';
		}
		
    	//删除
    	function delAr(id){
       		if(id != null && id != ''){
       			layer.confirm("确认要删除吗？",function(index){
       				$.ajax({
       	    			type: "POST",
       	    			url : "${pageContext.request.contextPath }/admin/proxyQrCode/delAr/" + id,
       	    			data: {aId:id},
       	                success: function(result){
       	                	if(result == "success"){
       	                		layer.msg('删除成功!',{icon:1});
       	                		searchAr();	
       	                	}else{
       	                		layer.msg('系统错误，删除失败!',{icon:0});
       	                	}
       	                }
       	    		});
       			});
       		}
    	}
    	
    	//添加
    	function addAr(){
    		layer.open({
			    type: 2,
			    area: ['700px', '500px'],
			    fix: false, //不固定
			    maxmin: true,
			    content: "${pageContext.request.contextPath }/admin/proxyQrCode/addPage",
			    end: function () {
			    	searchAr();
	            }
			});
    	}

    	function updateAr(id){
    		if(id != null && id != ''){
    			layer.open({
        			type:2,
        			area:['700px','500px'],
        			fix:false,
        			maxmin:true,
        			content: "${pageContext.request.contextPath }/admin/proxyQrCode/updatePage/" + id,
        			end:function(){
        				searchAr();
        			}
        		});
    		}
    	}
    	
        // 搜索
        function searchAr(){
			var proxy = $("#proxy").val();
			var proxyId = $("#proxyId").val();
        	$("#table_list_proxyQrCode").jqGrid('setGridParam',
           			{ 
    	    			url : "${pageContext.request.contextPath }/admin/proxyQrCode/qrCodeJson",
    	        		postData: {aName:$("#aName").val(),proxy:proxy,proxyId:proxyId}
            		}).trigger('reloadGrid'); 
        }
        

    	
    	//修改状态，是否启用
    	function updateActive(id){
			layer.confirm("确认要修改状态吗？",function(index){
				$.ajax({
	    			type: "POST",
	    			url : "${pageContext.request.contextPath }/admin/proxyQrCode/updateActive/" + id,
	    			data: {aId:id},
	                success: function(result){
	                	if(result == "success"){
	                		layer.msg('修改成功!',{icon:1});
	                		searchAr();	
	                	}else{
	                		layer.msg('系统错误，修改失败!',{icon:0});
	                	}
	                }
	    		});
			});
    	}

        
        // 上传图片
        function doUpload(_self, id){
            var name=_self.value;
            var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
            if(fileName !="mp4"){
                alert("请选择文件格式上传(.mp4格式)！");
                target.value="";
                return false;   //阻止submit提交
             }
        	var file = new FormData();
        	file.append('file', _self.files[0]);  
        	$.ajax({  
        	     url : "${pageContext.request.contextPath }/admin/proxyQrCode/uploadVideo/" + id,  
        	     type : "POST",  
        	     data : file,  
        	     async: false,  
                 cache: false,  
                 contentType: false,  
                 processData: false,  
        	     success : function(data) { 
        	    	 if(data.code == 0){
        				layer.alert(data.message,{icon:1});
        				searchAr();
        	    	 }else {
    					layer.msg(data.message,{icon:0});
    				 }
        	     },  
        	     error : function(data) {
        	    	 alert("上传失败");
        	     }  
        	});
        }
        
        
        //生成二维码
        function createQrCode(id){
    		if(id != null && id != ''){
            	$.ajax({  
           	     url : "${pageContext.request.contextPath }/admin/proxyQrCode/createQrCode/" + id,  
           	     type : "POST",  
           	     success : function(data) { 
           	    	 if(data.code == 0){
           				layer.alert(data.message,{icon:1});
                		searchAr();	
           	    	 }else {
       					layer.msg(data.message,{icon:0});
       				 }
           	     },  
           	     error : function(data) {
           	    	 alert("上传失败");
           	     }  
           	});
    		}
        }
    	
    	
        $(document).ready(function () {
        	function displaybuttons(cellvalue,options,rowObject){
        		var delAr = "<a title='删除' class='btn btn-zdy1 btn-sm m-t-sm m-r-sm' onclick='delAr("+options.rowId+")'><i class='fa fa-trash-o'></i>删除</a>";
        		var updateAr = "<a title='修改' class='btn btn-zdy1 btn-sm m-t-sm m-r-sm' onclick='updateAr("+options.rowId+")'><i class='fa fa-trash-o'></i>修改</a>";
        		var updateImage = "<form id = 'postForm' enctype='multipart/form-data'><input type='button' value='修改视频' onclick='$(this).parent().find(\".sssss\").click()' /> <input type='file' class='sssss' name='file' style='display:none;' onchange='doUpload(this," + options.rowId + ")'></form>"
              	return delAr + updateAr + updateImage;
            }
            $.jgrid.defaults.styleUI = 'Bootstrap';
            $("#table_list_proxyQrCode").jqGrid({
    			url : "${pageContext.request.contextPath }/admin/proxyQrCode/qrCodeJson",
            	datatype:"json", //数据类型，json
            	mtype:"POST",//提交方式
        		postData: {aName:$("#aName").val(),aUserName:$("#aUserName").val()},
                height: "auto",
                autowidth: true,//自动宽
                shrinkToFit: true,
                rowNum: 20,//每页显示记录数 
                rowList: [10, 20, 30],//用于改变显示行数的下拉列表框的元素数组。
                colNames: ['名称','二维码','识别视频','添加时间','操作'],
                colModel: [ 
                    {
                        name: 'name',
                        index: 'name',
                        width: "80px",
                        editable: true,
                    },
                    {
                        name: 'qr_code',
                        index: 'qr_code',
                        editable: true,
                        width: "60px",
                        formatter:qrCodeFormatter
                    },
                    {
                        name: 'video_url',
                        index: 'video_url',
                        editable: true,
                        width: "60px",
                        formatter:videoFormatter
                    },
                    {
                        name: 'created_at',
                        index: 'created_at',
                        width: "80px",
                        editable: true,
                        sortable: true,
                        formatter:'date',
                        formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}
                    },
                    { 
                    	name: 'Edit',
                    	index: 'Edit', 
                    	sortable: false, 
                    	width: "150px",
                    	formatter: displaybuttons
                    }
                ],
                jsonReader:{
                	root:"list",
                    id: "id",//设置返回参数中，表格ID的名字为blackId
                    repeatitems : false
                },
                pager: "#pager_list_2",
                viewrecords: true,//是否在浏览导航栏显示记录总数
                caption: "作品列表",
                add: true,
                edit: true,
                addtext: 'Add',
                edittext: 'Edit',
                hidegrid: false
            });
            // Add selection
            $("#table_list_proxyQrCode").setSelection(4, true);
            // Setup buttons
            $("#table_list_proxyQrCode").jqGrid('navGrid', '#pager_list_2', {
                edit: false,
                add: false,
                del: false,
                search: false
            }, {
                height: 400,
                reloadAfterSubmit: true
            });

            // Add responsive to jqGrid
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width();
                $('#table_list_proxyQrCode').setGridWidth(width);
            });
        });
    </script>
</body>
</html>